<template>
  <div class="lab-container">
    <!-- 导航栏（保持原有顶部导航） -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
      <!-- 原有导航栏代码保持不变 -->
    </nav>

    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-2">
          <div class="border p-3">
            <h5 class="mb-3">人才队伍</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-10">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/homePage">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/talentTeam">人才队伍</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">研究团队</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="row">
                <div
                  class="col-md-12 col-lg-12 mb-5"
                  v-for="teacher in teachers"
                  :key="teacher.name"
                >
                  <!-- 创新团队名称 -->
                  <h4
                    class="text-center fw-bold"
                    style="color: var(--site-color)"
                  >
                    {{ teacher.collegeTitle }}
                  </h4>
                  <!-- 团队说明 -->
                  <p style="text-indent: 2em" class="text-muted">
                    {{ teacher.collegeContent }}
                  </p>
                  <div class="teacher-card">
                    <img
                      :src="teacher.image"
                      style="height: 200px; width: auto; object-fit: cover"
                      :alt="teacher.name"
                      class="teacher-image"
                    />
                    <h4>
                      {{ teacher.name }}
                    </h4>

                    <p
                      style="text-indent: 2em; text-align: left"
                      class="text-muted"
                    >
                      {{ teacher.description }}
                    </p>
                  </div>
                </div>
              </div>
            </template>

            <template v-if="activeTab === 1">
              <h3 class="mb-4">研究人员</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="container my-5">
                <div
                  v-for="(group, index) in talentGroups"
                  :key="index"
                  class="mb-4"
                >
                  <div class="card shadow">
                    <div class="card-header text-white">
                      <h5 class="mb-0">{{ group.title }}</h5>
                    </div>
                    <div class="card-body">
                      <template v-if="group.data.length > 0">
                        <div class="row row-cols-2 row-cols-md-4 g-3">
                          <div
                            class="col"
                            v-for="(data, datas) in group.data"
                            :key="datas"
                          >
                            <a
                              class="text-truncate"
                              style="font-size: 1.2rem"
                              target="_blank"
                              :href="data.src"
                              >{{ data.name }}</a
                            >
                          </div>
                        </div>
                      </template>
                      <div v-else class="text-muted">暂无信息</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
const activeTab = ref(0);
const tabs = ref([
  {
    title: "研究团队",
    content: "研究团队内容",
  },
  {
    title: "研究人员",
    content: "组织结构内容",
  },
]);
const teachers = ref([
  {
    collegeTitle: "创新团队1：功能材料力学",
    collegeContent:
      "本团队针对热电功能材料和器件在服役环境中的关键力学问题，重点开展热电材料原子分子尺度力学理论与方法、热电材料电热输运与力学性能调控机制、热电器件优化设计及应用等方面的研究，取得了系列原创性成果。团队现有专职教师6人，其中教授3人、副教授3人，博士生导师3人，硕士生导师6人。近5年，团队先后获批国家级人才1人次、省部级人才3人次、校青年拔尖人才1人次；主持国家自然科学基金委优秀青年基金、重点项目课题、面上基金等项目7项、国家重点研发项目子课题1项、在Matter、Mater. Sci. Eng. R.、Adv. Mater.、Adv. Func. Mater等国际学术期刊上发表SCI论文40余篇。",
    name: "团队负责人李国栋教授",
    description:
      "武汉理工大学教授，博士生导师。国家自然科学基金优秀青年基金获得者，担任《Interdisciplinary Materials》和《Acta Mechanica Sinica》期刊编委；一直从事功能材料与微纳器件的原子分子尺度力学理论与方法研究及材料设计；先后获得国家优秀青年基金（2020）、国际热电学会博士后学者奖（2018，全球范围内授予1名博士后）、湖北省博士后卓越人才计划（2021）、武汉市黄鹤英才优秀青年人才（2019）等荣誉。在Mater. Sci. Eng. R.、Matter、Phys. Rev. Lett.、Adv. Mater、Adv. Func. Mater.、Acta. Mater.等刊物发表论文50余篇。",
    image: require("../assets/images/teacher1.png"),
  },
  {
    collegeTitle: "创新团队2：绿色智能材料",
    collegeContent:
      "本团队主要以绿色机敏水泥基复合材料、形状记忆材料、吸波隐身材料、智能复合材料等先进材料及其结构为研究对象。以绿色材料-智能器件-先进结构系统为研究主线，具有鲜明的多学科交叉特色，具有较强的基础科学研究与工程应用研究的综合优势。主要研究领域包括绿色智能材料与结构的设计制备、力学行为、实验力学、系统集成。设计制备主要通过研究设计制备新方法，开发和制备出具有高性能的先进智能材料和结构；力学行为主要基于多尺度理论模型来探究其力学行为机制，以及进行计算模拟仿真；实验力学主要发展新的实验方法和测试技术，研究组成、结构与力学性能的关系；系统集成主要开发利用分布式光纤传感器、复合超声换能器等智能特性，实现应用时的健康监测与控制，提升服役可靠性。团队现有专职教师6人，其中教授2人、副教授4人，博士生导师3人，硕士生导师6人，拥有教育部新世纪优秀人才1人，全国徐芝纶力学优秀教师奖1人。近5年（2018年至今），团队先后获批国家自然科学基金面上项目2项，青年基金3项、国家重点研发计划项目子课题1项，其他纵向、军工横向、企事业委托项目近10余项，项目总经费到账近600万元，在Cement and Concrete Research、Cement and Concrete Composites、Materials & Design、Scripta Materialia、Journal of Alloys and Compounds、Smart Materials and structures、Soil Dynamics and Earthquake Engineering、硅酸盐通报、中国有色金属学报等期刊发表学术论文90余篇，SCI收录58篇，申请/授权发明专利15项，出版专著/教材2部、获省部级奖励1项。",
    name: "团队负责人吕林女教授",
    description:
      "教育部新世纪优秀人才，从事绿色水泥基复合材料的组成、结构及性能研究，具体为低碳胶凝材料的开发与应用，水泥的水化热动力学，水泥主要水化产物的微结构表征和微观力学性能，高性能和超高性能混凝土的设计、制备与应用技术，先进水泥基复合材料的力学行为和耐久性能，固体废弃物在水泥基材料中的生态化应用。主持国家自然科学基金项目4项，国家科技攻关项目子项1项。获国家科技进步二等奖2项（均排名3），省部级技术发明一等奖、教育部科技进步一等奖、省科技进步一等奖等多项。授权国家发明专利20余项。在国内外重要学术刊物上发表论文100余篇，其中SCI收录约60篇。",
    image: require("../assets/images/teacher2.png"),
  },
  {
    collegeTitle: "创新团队3：计算力学理论方法与工程应用",
    collegeContent:
      "本团队针对极端环境多物理场条件下材料的动态响应与物理力学特性，在传统计算力学方法上进行理论创新和应用研究，重点开展多尺度有限元理论、流固耦合计算力学理论、近场动力学理论、以及先进复合材料制造工艺多场耦合理论研究，并将其应用于在极端服役条件下材料复杂物理力学行为的工程应用研究中。团队现有专职教师8人，其中教授2人、副教授6人，博士生导师1人，硕士生导师8人。近5年，团队先后获批“武汉英才“优秀青年人才1人次、校青年拔尖人才1人次；主持国家级纵向项目12项，省部级项目10余项，总经费2000余万元。在J. Mech. Phys. Solids., Int. J. Impact Eng., J. Fluid Mech., Comput. Methods Appl. Mech. Eng., Phys. Rev. Lett., Int. J. Plast., Phys. Rev. B等力学顶尖学术期刊上发表SCI论文20余篇。",
    name: "团队负责人刘立胜教授",
    description:
      "武汉理工大学物理与力学学院院长，湖北省力学学会常务理事，湖北省复合材料学会理事长，新材料力学理论与应用湖北省重点实验室副主任。作为项目负责人和技术负责人先后承担了多项国家级科研项目以及省部级和企业委托项目的研究，参与C919、ARJ、鲲龙600等国产多种型号飞机、大型军用船舶的仿真设计工作，承担包括国家自然科学基金2项、重要国防纵向项目4项以及航空、船舶企业委托项目多项，近五年项目经费2000余万。先后发表高水平SCI论文150余篇。指导的研究生毕业论文多次获得湖北省优秀硕士学位论文。2009年被中国力学学会评为全国徐芝纶优秀教师。",
    image: require("../assets/images/teacher3.png"),
  },
  {
    collegeTitle: "创新团队4：先进复合材料力学与结构设计",
    collegeContent:
      "高强轻质复合材料是航空航天、武器装备、汽车、舰船和轨道交通结构轻量化的关键材料之一。本团队在玻璃钢和复合材料领域形成了深厚的研究底蕴并在复合材料的多个应用领域形成了影响力。具体包括① 先进复合材料制造工艺力学；② 先进复合材料性能与结构计算理论；③ 复合材料结构设计与工程应用。该团队目前有成员8人，其中教授2人，副教授6人，博导3人，硕导8人。近五年，团队获批1项国家科技支撑计划、2项国家级纵向项目、3项国家自然科学基金、2项省部级项目、10余项国防科技项目以及20余项企业委托的复合材料力学与结构设计研发项目，总经费约1800万。在力学、复合材料和高聚物学科领域知名学术期刊发表SCI/EI收录论文60余篇，取得了一系列较好的研究成果。负责起草国家标准2部、行业标准1部，参与多项国家及行业技术规范/标准的制定，获河北省科技进步二等奖1项、国家建材科技进步二等奖1项。",
    name: "团队负责人晏石林教授",
    description:
      "学科责任教授、博士生导师、享受湖北省政府专项津贴、新材料力学理论与应用湖北省重点实验室主任、武汉理工大学理学部学术委员会委员、物理与力学学院教授会主席 、中国复合材料学会荣誉理事（第四、五、六届理事）、中国力学学会第十届理事会理事、南方计算力学联络委员会副主任；湖北省复合材料学会第五、六届理事会理事长、湖北省力学学会第七、八、九届理事会副理事长、湖北省消防协会副理事长等。获中国科学院自然科学三等奖、霍英东教育基金会高等学校青年教师三等奖、湖北省优秀学术论文一等奖、黄石市技术发明奖、湖北省学位与研究生教育管理工作先进个人。主持且完成国家自然科学基金3项，国家科技支撑计划课题1项、省部级科研项目2项，国防科研和企事业委托项目多项。发表学术论文180多篇，其中被SCI、EI收录120余篇。主编出版复合材料结构专著2部，参编2部。获得国家授权发明专利10多项。",
    image: require("../assets/images/teacher4.png"),
  },
]);

import { reactive } from "vue";

// 人才队伍数据
const talentGroups = reactive([
  {
    title: "教授",
    data: [
      {
        name: "陈建中",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288755.shtml",
      },
      {
        name: "段波",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288772.shtml",
      },
      {
        name: "李国栋",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288784.shtml",
      },
      {
        name: "李君",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288935.shtml",
      },
      {
        name: "刘立胜",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288920.shtml",
      },
      {
        name: "吕林女",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288797.shtml",
      },
      {
        name: "孙明清",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288778.shtml",
      },
      {
        name: "晏石林",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288788.shtml",
      },
      {
        name: "翟鹏程",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288919.shtml",
      },
      {
        name: "朱四荣",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288785.shtml",
      },
    ],
  },
  {
    title: "副教授",
    data: [
      {
        name: "曹晓飞",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288787.shtml",
      },
      {
        name: "陈刚",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288756.shtml",
      },
      {
        name: "褚亮亮",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288764.shtml",
      },
      {
        name: "冯晓斌",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288780.shtml",
      },
      {
        name: "胡海晓",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288766.shtml",
      },
      {
        name: "黄维",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288752.shtml",
      },
      {
        name: "蒋茂圆",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288765.shtml",
      },
      {
        name: "赖欣",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288761.shtml",
      },
      {
        name: "李芳",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288777.shtml",
      },
      {
        name: "李旭",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288783.shtml",
      },
      {
        name: "林永水",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288774.shtml",
      },
      {
        name: "刘记立",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288779.shtml",
      },
      {
        name: "梅海",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202411/t20241107_1297809.shtml",
      },
      {
        name: "文聘",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288790.shtml",
      },
      {
        name: "文鹏飞",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288789.shtml",
      },
      {
        name: "徐爽",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288791.shtml",
      },
      {
        name: "杨绪秋",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288776.shtml",
      },
      {
        name: "张小玉",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288794.shtml",
      },
      {
        name: "钟愉承",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288758.shtml",
      },
      {
        name: "周令",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288796.shtml",
      },
    ],
  },
  {
    title: "讲师",
    data: [
      {
        name: "贺丹琪",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288762.shtml",
      },
      {
        name: "姜亚中",
        src: "http://phymech.whut.edu.cn/szdw/zrjs/202410/t20241026_1288795.shtml",
      },
    ],
  },
]);
</script>

<style scoped>
p {
  font-size: 1.5rem;
}
/* 标签页栏目内横线 */
.custom-divider {
  height: 2px;
  background-color: var(--site-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.nav-link,
.nav-link:hover {
  color: var(--site-color);
}
li > a {
  color: var(--site-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--site-color);
  color: white !important;
}

.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.teacher-card {
  text-align: center;
  padding: 20px;
  border: 1px solid var(--site-color);
  border-radius: 8px;
  margin-bottom: 20px;
}

.teacher-image {
  width: 100%;
  max-width: 200px;

  margin-bottom: 10px;
}
thead {
  color: var(--site-color) !important;
}

/* 研究人员 */
.card {
  border-radius: 0.75rem;
}

.card-header {
  background-color: var(--site-color);
  font-weight: 600;
  letter-spacing: 1px;
}

.col {
  padding: 0.5rem 1rem;
}

.text-truncate {
  color: var(--site-color);
  font-size: 1rem;
  text-decoration: none;
}
</style>